<script setup>
import {
  ArrowRightBold, CircleClose,
  CloseBold,
  Expand,
  Fold,
  Key,
  PictureFilled,
  Rank,
  Search,
  User,
  Sunny,
  Moon,
} from "@element-plus/icons-vue";
import {computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import screenfull from "screenfull";
import { ref } from 'vue';
import { useDark, useToggle } from '@vueuse/core';
import axios from "axios";

const isDark = useDark({
  selector: 'html',
  attribute: 'data-bs-theme',
  valueDark: 'dark',
  valueLight: 'light'
});

const isDarkTag = ref(false);

const toggleTheme = (event) => {
  const x = event.clientX;
  const y = event.clientY;
  const endRadius = Math.hypot(
      Math.max(x, innerWidth - x),
      Math.max(y, innerHeight - y)
  );

  if (!document.startViewTransition) {
    isDarkTag.value = !isDarkTag.value; // 直接切换 isDarkTag 的值
    store.commit('setTheme', isDarkTag.value ? 'dark' : 'light'); // 提交 mutation 来更新主题
    return;
  }
  const transition = document.startViewTransition(() => {
    isDarkTag.value = !isDarkTag.value; // 直接切换 isDarkTag 的值
    store.commit('setTheme', isDarkTag.value ? 'dark' : 'light'); // 提交 mutation 来更新主题
  });

  transition.ready.then(() => {
    const clipPath = [
      `circle(0px at ${x}px ${y}px)`,
      `circle(${endRadius}px at ${x}px ${y}px)`,
    ];
    document.documentElement.animate(
        {
          clipPath: isDarkTag.value ? [...clipPath].reverse() : clipPath,
        },
        {
          duration: 600,
          easing: 'ease-in',
          pseudoElement: isDarkTag.value
              ? '::view-transition-old(root)'
              : '::view-transition-new(root)',
        }
    );
  });
};

const router = useRouter();
const store = useStore();


const breadcrumbs = computed(() => store.state.breadcrumbs);
const isCollapse = computed(() => {return store.state.isCollapse});
const tags = computed(() => store.state.tags);
const activeTag = computed(() => store.state.activeTag);
const activeUser = computed(() => store.state.activeUser);
const theme = computed(() => store.state.theme);
const fullScreen = function () {
  if (screenfull.isEnabled) {
    screenfull.toggle();
  }
}



// 切换图标和折叠状态
const toggleCollapse = () => {
  store.commit('setCollapse');
};
const goLogin = () => {
  localStorage.setItem('token',null)
  router.push({ path: '/login' });
};
const goToTag = (path) => {
  router.push(path);
  store.commit('setActiveTag', path);
};
const removeTag = (path) => {
  store.commit('removeTag', path);
};
const enterMine = computed(() => {
  router.push({ path: '/home/mine' });
})
const enterPassword = computed(() => {
  router.push("/home/mine/password");
})
let url = ref("")
onMounted(() => {
  url.value = localStorage.getItem('avatar');
});
</script>

<template>
<div>
  <div class="title">
    <div class="title1">
      <div class="title1-left">
        <el-icon @click="toggleCollapse" v-if="isCollapse"><Expand /></el-icon>
        <el-icon @click="toggleCollapse" v-if="!isCollapse"><Fold /></el-icon>
      </div>
      <div class="title1-left2"><!--动态创建span标签-->
        <div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
              <router-link v-if="item.to" :to="item.to">{{ item.name }}</router-link>
              <span v-else>{{ item.name }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="title1-right">
        <div class="title1-right-box">
          <a href="https://doc.ruoyi.vip/ruoyi/" target="_blank">
            <el-icon><Search /></el-icon>
            文档
          </a>
        </div>
        <div class="title1-right-box" id="hh">
          <el-button size="small" @click="toggleTheme($event)" circle>
            <el-icon><component :is="theme === 'light' ? Sunny : Moon" /></el-icon>
            {{ theme === 'light' ? '深色' : '浅色' }}
          </el-button>
        </div>
        <div class="title1-right-box" @click="fullScreen">
          <el-icon><Rank /></el-icon>
          全屏
        </div>
        <div class="title1-right-box" id="user">
          <img :src="url" alt="用户头像">
          <span v-if="activeUser">{{ activeUser.username }}</span>
          <div class="inbox">
            <ul>
              <li  @click="enterMine">
                <el-icon><User /></el-icon>
                <span>个人空间</span>
              </li>
              <li @click="enterPassword">
                <el-icon><Key /></el-icon>
                <span>修改密码</span>
              </li>
              <li>
                <el-icon><PictureFilled /></el-icon>
                <span>切换主题</span>
              </li>
              <li>
                <el-icon><ArrowRightBold /></el-icon>
                <span>横向菜单</span>
              </li>
              <li style="border-top: 1px #6c6c6c solid" @click="goLogin">
                <el-icon><CloseBold /></el-icon>
                <span>退出登录</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="title2">
      <div v-for="(tag, index) in tags" :key="index" :class="{'tag-item': true, 'active': activeTag === tag.path}" @click="goToTag(tag.path)">
        {{ tag.name }}
        <el-icon @click="removeTag(tag.path)" class="title2-span2"><CircleClose /></el-icon>
      </div>
    </div>

  </div>
</div>
</template>

<style scoped>
.title {
  width: 100%;
  height: 84px;
  background-color: var(--el-color-success);
}
.title1{
  height: 50px;
  position: relative;
  background: var(--el-color-primary);
  -webkit-box-shadow: 0 1px 4px var(--el-color-success);
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
}
.title1-left{
  line-height: 54px;
  height: 100%;
  float: left;
  cursor: pointer;
  -webkit-transition: background .3s;
  transition: background .3s;
  -webkit-tap-highlight-color: transparent;
  padding: 0 15px;
}
.title1-left2{
  float: left;
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;
}
.title1-left2 div{
  display: inline-block;
}
.title1-left>div{
  float: left;
  display: inline-block;
  height: 50px;
  line-height: 50px;
}
.title1-right{
  width: 280px;
  float: right;
  height: 100%;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  margin-right: 15px;
}
.title1-right-box{
  display: inline-block;
  width: 60px;
  height: 50px;
  cursor: pointer;
}
.title1-right-box:hover{
  background-color: #79b9d5;
}
#user{
  display: flex;
  position: relative;
}
#user>img{
  width: 27px;
  height: 27px;
  border-radius: 50%;
  margin-top: 12px;
}
.inbox{
  width: 140px;
  height: 200px;
  position: absolute;
  top: 50px;
  right: -15px;
  z-index: 19;
  display: none;
  border: 1px #c6c6c6 solid;
  background-color: #dfdfdf;
}
#user:hover .inbox{
  display: block;
}
.inbox li{
  height: 40px;
  text-align: center;
}
.title2{
  height: 34px;
  line-height: 34px;
  display: flex;
}
#hh{
  /*position: fixed;
  top: 50px;
  left: 500px;
  z-index: 9;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag-item{
  display: flex;
  position: relative;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 4px;
  transition: background-color 0.3s;
}
.active{
  background-color: #07cf07;
  color: white;
}
.title2-span2{
  width: 16px;
  height: 16px;
  vertical-align: 2px;
  border-radius: 50%;
  text-align: center;
  -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  margin-top: 5px;
  margin-left: 2px;
}
/* View Transitions API 样式 */
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 1999;
}

::view-transition-old(root) {
  z-index: 1999;
}
::view-transition-new(root) {
  z-index: 1;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
</style>